<script lang="ts" setup>
import { Toast } from "vant";
import Pubsub from "pubsub-js";
import { onMounted, onUnmounted, ref } from "vue";
import { PubSubEnum } from "@/types";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const showRef = ref<boolean>(false);
const textRef = ref<string>(t("tip.success"));
const cbRef = ref<() => void>();
const showText = (_: string, params: { text?: string; cb?: () => void }) => {
  textRef.value = params?.text || t("tip.success");
  showRef.value = true;

  if (params?.cb) {
    cbRef.value = params.cb;
  }
};

onMounted(() => {
  Pubsub.subscribe(PubSubEnum.DEACTIVATE_TOAST, showText);
});

onUnmounted(() => {
  Pubsub.unsubscribe(PubSubEnum.DEACTIVATE_TOAST, showText);
});
</script>
<template>
  <Toast
    v-model:show="showRef"
    :overlay="true"
    style="padding: 0; overflow: hidden; background-color: rgba(0, 0, 0, 0.6)"
    :duration="0"
    overlayClass="overlayframe"
    className="deactivate-toast"
  >
    <template #message>
      <div class="success-inner">
        <span>Account frozen</span>
      </div>
    </template>
  </Toast>
</template>
<style lang="less" scoped>
@height: 73px;
.success-inner {
  width: 664px;
  background: rgba(34, 34, 34, 1);
  height: 164px;
  border-radius: 15px;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  min-height: @height;
  color: rgba(255, 255, 255, 0.7);

  span {
    line-height: 18px;
    text-align: center;
    word-break: break-word;
  }
}
</style>
<style>
.overlayframe {
  background-color: rgba(0, 0, 0, 0.6) !important;
}
.deactivate-toast {
  width: 664px;
}
</style>
